<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>排班表</title>
		<!--引入elementui得样式-->
		<link type="text/css" rel="stylesheet" href="/css/index.css" />
		<!--引入vue得依赖必须再elementui之前引入vue-->
		<script type="text/javascript" src="/js/vue.js"></script>
		<script type="text/javascript" src="/js/index.js"></script>
		<script type="text/javascript" src="/js/axios.min.js"></script>
	</head>
	<style>
		#treeBox{
			position: absolute;
			width: 200px;
			height: 416px;
			margin-top: 59px;
		}
		.imgbox {
			position: absolute;

			border-radius: 50%;
			overflow: hidden;
			height: 80px;
			width: 80px;
			/*border: 1px solid;*/
			display: inline-block;
		}

		.infobox {
			position: absolute;
			left: 85px;
			height: 70px;
			width: 152px;
			/*border: 1px solid;*/
			display: inline-block;

		}

		.contextbox {
			position: relative;
			margin: 20px 0px auto 12px;
		}

		.addbtn {
			margin-top: 26px;
		}

		#table_head{
			width: 1000px;
			margin-left: 200px;
			text-align: center;
			height: 70px;
			line-height: 70px;
			font-family: Microsoft YaHei;
		}
		#tscheduleList{
			width: 1000px;
			margin-left: 200px;
		}
		.el-calendar-table tr td:first-child {
			border-left: 1px solid #545C64;
		}
		.el-calendar-table tr:first-child td {
			border-top: 1px solid #545C64;
		}
		.el-calendar-table td {
			border-bottom: 1px solid #545C64;
			border-right: 1px solid #545C64;
		}
		.el-table__row{
			height: 115px;
		}
		.price_infobox{
			position: relative;
		}
		.el-tree-node__content{
			height: 38px;
		}
		.el-tree-node__label {
			font-size: 20px;
		}
		.el-pagination {
			white-space: nowrap;
			padding: 2px 5px;
			color: #070808;
			font-weight: 700;
			position: relative;
			left: 198px;
		}
	</style>
	<body style="overflow-x:hidden">

		<div id="app">
			<el-tree
					id="treeBox"
					:data="depinfo"
					node-key="deptId"
					:default-expanded-keys="[2]"
					:default-checked-keys="[2]"
					:props="defaultProps"
					@node-click="handleNodeClick"
			></el-tree>

			<h1 style="text-align: center">{{scheName}}</h1>
			<!--表头-->
			<table class="el-calendar-table el-table__body" cellpadding="0" cellspacing="0" id="table_head" >
				<thead>
					<tr>
						<td style="width: 240px;height: 30px;" class="el-table__cell">医生列表</td>
						<td v-for="(sdate,i) in shceDate" class="el-table__cell"><b>{{sdate}}</b></td>
					</tr>
				</thead>
			</table>
			<!--表数据-->
			<div id="tscheduleList">
				<div v-for="c in scheInfo">
					<table class="el-calendar-table el-table__body" cellpadding="0" cellspacing="0">
						<tbody>
							<tr class="el-table__row">
								<td v-for="(p,i) in c" v-if="i==0" style="width: 240px;height: 90px;" class="el-table__cell">
									<div class="contextbox">
										<div class="imgbox">
											<img :src="p.adminUrl" width="80px">
										</div>
										<div class="infobox">
											<p><b style="color:rgb(1, 164, 162) ">{{p.name}}</b></p>
											{{p.adminDesc}}
										</div>
									</div>
								</td>
								<td v-else style="text-align: center;" class="el-table__cell">
									<div v-if="p.schedulingId == null" class="addbtn">
										<button class="el-button el-button--success is-round"
											@click="showAddScheduling(p.adminId,p.date,p.doctorName)">添加排班</button>

									</div>
									<div v-else class="price_infobox">
										<div style="color: #01A4A2; font-weight: bold;margin-top: 20px;" class="price_info">
											￥<span v-html="p.price"></span>
											<br>
											<br>
											可预约人数<span v-html="p.num"></span>
										</div>
									</div>
								</td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
			<!--分页-->
			<el-pagination
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:current-page="currentPage"
					:page-sizes="[5, 10, 15, 20]"
					:page-size="pageSize"
					layout="total, sizes, prev, pager, next, jumper"
					:total="total">
			</el-pagination>

			<!--添加排班信息弹窗-->
			<el-dialog title="提示" :visible.sync="dialogVisible" width="30%" @close="dialogClose">
				<span>添加<b style="color: rgb(1, 164, 162)">{{doctorName}}医生--{{pdate}}</b>排班信息</span>
				<el-form  :model="scheForm" class="demo-ruleForm" ref="ruleForm" :rules="shceRules" >
                    <el-form-item label="预约人数" prop="num">
						<el-input v-model.number="scheForm.num" placeholder="预约人数" ></el-input>
					</el-form-item>
                    <el-form-item label="预约价格" prop="price">
                        <el-input v-model.number="scheForm.price" placeholder="预约价格"></el-input>
                    </el-form-item>

				</el-form>
				<span slot="footer" class="dialog-footer">
					<el-button @click="dialogVisible = false">取 消</el-button>
					<el-button type="primary" @click="addScheduling">确 定</el-button>
				</span>
			</el-dialog>

		</div>



	</body>
	<script>
		var url = window.location.href;
		// var sectionid = url.split("=")[1];
		var app = new Vue({
			el: "#app",

			data: {
				//动态生成的日期
				shceDate: [],

				//医生和排班信息
				scheInfo: {},

				//添加排班信息弹窗
				dialogVisible: false,

				//树形控件的参数
				data:{},

				//科室名称
				scheName:"体检科",

                //添加的排班信息
				scheForm:{},

				//部门和科室的信息
				depinfo:[],

				//配置选项
				defaultProps:{
					label:"deptName",
					children: 'children',
				},

                //弹出层显示医生姓名
                doctorName:"",

                //弹出层显示日期
                pdate:"",

				//数据总量
				total: 0,
				//    当前页面显示的条数
				pageSize: 5,
				//    当前显示的页码
				currentPage: 1,

				//输入校验
				shceRules:{
					num:[
						{ required: true, message: '请输入可预约人数', trigger: 'blur' },
						{ min:5 , max:25, type:"number" , trigger:"blur" , message:"预约人数在5-25之间"},
					],
					price:[
						{ required: true, message: '请输入预约价格', trigger: 'blur' },
						{ type:"number" , trigger:"blur" , message:"请输入数字"},
					],
				}

			},

			created() {
				this.initDate();
				this.initTable();
				this.initDept();
			},

			methods: {
			    //关闭弹出框重置内容
                dialogClose(){
                    console.log(this)
                    this.$refs.ruleForm.resetFields()
                },

			    //确认添加排班信息
                addScheduling(){
                    //日期
                    this.scheForm.date=this.pdate;
                    //部门id
                    this.scheForm.sectionId=this.data.deptId;;
					//发送请求
					this.$refs.ruleForm.validate((valid) => {

						//验证通过之后才发请求
						if(valid){
							axios.post("/scheduling/addScheduling",this.scheForm).then(res=>{
								console.log(res)
								if (res.data.code===2000){
									this.dialogVisible=false;
									this.$message.success("排班成功")
									this.handleNodeClick(app.data)

								}
							})
						}


					});



                },
				//添加弹窗显示
				showAddScheduling(id,date,name) {
                    //医生id
                    this.scheForm.adminId=id;
                    //显示医生姓名
                    this.doctorName=name;
                    //显示时间
					this.pdate=date;
					//显示对话框
					this.dialogVisible = true;
				},

				//初始化日期
				initDate() {
					axios.get("/schedulingDate/schedulingDate", ).then(res => {
						this.shceDate = res.data.data;
					})
				},
				//初始化列表
				initTable() {
					axios.get("/scheduling/scheduling").then(res => {

						this.scheInfo = res.data.data.data;
						this.total=res.data.data.total;

					})
				},

				//所有部门和科室信息
				initDept(){
                	axios.get("/scheduling/menu").then(res=>{
                		console.log(res)
						this.depinfo=res.data.data
						console.log(this.depinfo)
					})
				},

				//树形控件点击事件
				handleNodeClick(data) {
                	this.data=data;
					if(data.children.length==0){
						this.scheName=data.deptName;
						axios.get("/scheduling/scheduling?sectionid=" + data.deptId + "&currentPage=" + this.currentPage + "&pageSize=" + this.pageSize).then(res => {
							this.scheInfo = res.data.data.data;
							this.total=res.data.data.total;


						})
					}
				},

				//分页显示
				handleSizeChange(val) {
					this.pageSize=val;
					this.handleNodeClick(app.data)
				},

				handleCurrentChange(val) {
					this.currentPage=val;
					this.handleNodeClick(app.data)
					this.currentPage=1;

				},
			}
		})
	</script>
</html>
